<template>
    <div class="goods">
        <div class="wrap">
            <Crumb></Crumb>
            <img src="../assets/img/banner.4c6b6225.png" width="100%" alt />
            <ul class="options">
                <li>
                    <strong>排序:</strong>
                    <!-- <span class="active">全部</span>
                    <span>我还可以兑换</span>
                    <span @click="change(0,0,0,500,'')">0-500个</span>
                    <span @click="change(0,0,500,1000,'')">500-1000个</span>
                    <span @click="change(0,0,1000,1500,'')">1000-1500个</span>
                    <span @click="change(0,0,1500,2500,'')">1500-2500个</span>
                    <span @click="change(0,0,2500,5000,'')">2500-5000个</span>
                    <span @click="change(0,0,2500,10000,'')">2500-10000个</span>
                    <span @click="change(0,0,10000,20000,'')">10000-30000个</span>-->
                    <span
                        :class="{active:index==num1}"
                        v-for="item,index in  options1"
                        :key="index"
                        @click="options1Fn(index,item.min,item.max)"
                    >{{item.txt}}</span>
                </li>
                <li>
                    <strong>分类:</strong>
                    <!-- <span class="active">全部</span>
                    <span @click="change(1,0,0,0,'')">实物礼品</span>
                    <span @click="change(2,0,0,0,'')">虚拟礼品</span>-->
                    <span
                        v-for="item,index in options2"
                        :key="index"
                        :class="{active:index==num2}"
                        @click="options2Fn(index,item.type)"
                    >{{item.txt}}</span>
                </li>
            </ul>
            <List :arr="moreProductsShow" />
            <div style="text-align: center">{{!isReachButtom?'加载完毕!':'加载中...'}}</div>
            <div class="spinner" v-show="!isReachButtom">
                <div class="bounce1"></div>
                <div class="bounce2"></div>
                <div class="bounce3"></div>
            </div>
        </div>
    </div>
</template>                            
<script>
import Crumb from "../components/Crumb.vue";
import List from "../components/home/List.vue";
import { moreProductsApi } from "@/request/api";
import { getScrollTop, getClientHeight, getScrollHeight } from "@/utils/index";
export default {
    data() {
        return {
            moreProducts: [],
            // 栏目 目前可提供的参数是 1->精品推荐 2-> 热门兑换 0->全部
            did: 0,
            // ( 1->实体商品 2->虚拟商品 0->全部 )
            type: 0,
            // 大于多少积分，最少是0
            min: 0,
            //少于多少积分，最多是10000，当传入0的时候，会直接返回所有商品，无视后台逻辑。
            max: 0,
            // 商品关键词
            keyword: "",
            options1: [
                { min: 0, max: 30000, txt: "全部" },
                { min: 0, max: 0, txt: "我还可以兑换" },
                { min: 0, max: 500, txt: "0-500分" },
                { min: 500, max: 1000, txt: "500-1000分" },
                { min: 1000, max: 1500, txt: "1000-1500分" },
                { min: 1500, max: 2500, txt: "1500-2500分" },
                { min: 2500, max: 6500, txt: "2500-6500分" },
                { min: 6500, max: 10000, txt: "6500-10000分" },
                { min: 6500, max: 10000, txt: "10000-30000分" },
            ],
            // 分类数组项
            options2: [
                { type: 0, txt: "全部" },
                { type: 1, txt: "实体商品" },
                { type: 2, txt: "虚拟商品" },
            ],
            // 排序当前项
            num1: 0,
            // 分类当前项
            num2: 0,
            //排序条件渲染的数据
            moreProductsShow: [],
            // 页数
            page: 1,
            // 条数
            size: 8,
            // 是否正在加载
            isloding: false,
            // 是否加载达底部
            isReachButtom: false,
        };
    },
    components: {
        Crumb,
        List,
    },
    created() {
        // this.getmoreProducts();
        this.keyword = this.$route.query.keyword;
        this.getmoreProducts();
    },
    methods: {
        // change(did, type, min, max, keyword) {
        //     (this.did = did),
        //         (this.type = type),
        //         (this.min = min),
        //         (this.max = max),
        //         (this.keyword = keyword);
        //     this.getmoreProducts();
        // },
        options1Fn(index, min, max) {
            this.num1 = index;
            this.min = min;
            this.max = max;
            this.getmoreProducts();
        },
        options2Fn(index, type) {
            this.num2 = index;
            this.type = type;
            this.getmoreProducts();
        },
        async getmoreProducts() {
            let res = await moreProductsApi({
                did: this.did,
                type: this.type,
                min: this.min,
                max: this.max,
                keyword: this.keyword,
            });
            if (!res) return;
            if (res.code == 0) {
                console.log(res);
                this.moreProducts = res.data;
                this.moreProductsShow = this.moreProducts.filter(
                    (item, index) => index < 8
                );
                this.page = 1;
                this.isReachButtom = false;
                if (this.moreProducts.length == this.moreProductsShow.length) {
                    this.isReachButtom = true;
                    return;
                }
            }
        },
        scrollFn() {
            // console.log("滚动了");
            // console.log(getScrollTop(), getClientHeight(), getScrollHeight());
            // 滚动距离  可视高度  文档高度
            // 我们判断 滚动距离+可视高度>=文档高度
            if (getScrollTop() + getClientHeight() >= getScrollHeight() - 200) {
                // 可以加载下一页数据了
                //情况1，开始发请求 请求page：2 size:8 的数据，由后台直接返回对应的页码的数据给我们。
                //情况2, 开始从goodsList中提取page:2 size:8的数据 ，追加到goodsListShow中
                //第一页的数据  page:1 ,size:8   对应goodsList中索引为 0~7
                //第二页的数据  page:2 ,size:8   对应goodsList中索引为 8~15
                //第三页的数据  page:3 ,size:8   对应goodsList中索引为 16~23
                // 节流,通过一个变量来控制代码一段时间只执行一次
                if (this.moreProducts.length == this.moreProductsShow.length) {
                    this.isReachButtom = true;
                    return;
                }
                if (this.isloding == false) {
                    this.isloding = true; // 开始加载
                    this.page++;
                    setTimeout(() => {
                        for (
                            let i = this.size * (this.page - 1);
                            i < this.page * this.size;
                            i++
                        ) {
                            // console.log(
                            //     "要追加的数据为",
                            //     this.page,
                            //     this.moreProducts[i]
                            // );
                            // 索引超出时 ,不追加
                            this.moreProducts[i] &&
                                this.moreProductsShow.push(
                                    this.moreProducts[i]
                                );
                        }
                        this.isloding = false; // 没有加载了
                    }, 1500);
                }
            }
        },
    },
    // watch: {
    //     "$route.query.keyword": {
    //         handler(newVal, oldVal) {
    //             this.keyword = newVal;
    //             this.getmoreProducts();
    //         },
    //     },
    // },
    // 相当于上面的监听
    beforeRouteUpdate(to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
        console.log("beforeRouteUpdate");
        next();
        this.keyword = this.$route.query.keyword;
        this.getmoreProducts();
    },
    // 创建之后挂载
    mounted() {
        window.addEventListener("scroll", this.scrollFn);
    },
    // 销毁前
    beforeDestroy() {
        window.removeEventListener("scroll", this.scroolFn);
    },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/css/public.less";

.goods {
    padding-bottom: 50px;
    background: #efefef;
    padding-top: 20px;
    .options {
        padding-top: 20px;
        padding-bottom: 40px;
        li {
            margin-top: 20px;
            strong {
                color: #000;
                font-weight: bold;
            }
            span {
                margin-right: 20px;
                margin-left: 10px;
                cursor: pointer;
                color: #999;
                &.active {
                    color: @base-color;
                    font-weight: bold;
                }
            }
        }
    }
    .spinner {
        margin: 10px auto 0;
        width: 70px;
        text-align: center;
    }

    .spinner > div {
        width: 18px;
        height: 18px;
        background-color: #333;

        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }

    .spinner .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .spinner .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }

    @-webkit-keyframes sk-bouncedelay {
        0%,
        80%,
        100% {
            -webkit-transform: scale(0);
        }
        40% {
            -webkit-transform: scale(1);
        }
    }

    @keyframes sk-bouncedelay {
        0%,
        80%,
        100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        40% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
}
</style>